<template>
	<view class="container">
		<view class="arrow-left" :style="'padding-top:'+(systemInfo.statusBar)+'px;height:'+(systemInfo.navbar)+'px'">
			<view class="icon" :style="'height:'+(systemInfo.navbar)+'px'" @click="handleBack" >
				<u-icon name="arrow-left" color="#fff" size="20"></u-icon>
			</view>
		</view>
		<canvas canvas-id="posterCanvas" class="poster-canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }">
			<cover-view class="download-box">
				<button class="download-btn" @click="saveImageToPhotosAlbum">保存海报</button>
			</cover-view>
		</canvas>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			canvasWidth: 0,
			canvasHeight: 0,
			posterBgImage: '',
			avatarImage: '',
			qrCodeImage: '',
			nickname: '用户昵称'
		}
	},
	computed: {
		systemInfo(){ 
			return uni.getStorageSync('systemInfo')	
		},
		userInfo() {
			return this.$store.state.userInfo 
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		// 设置canvas的宽度为屏幕宽度
		this.canvasWidth = sysInfo.screenWidth
		// 设置高度为屏幕宽度的1.78倍（16:9比例，可以根据实际需求调整）
		this.canvasHeight = sysInfo.screenHeight
		this.getImg()
	},
	methods: {
		
		handleBack(){
			uni.navigateBack()
		},
		getImg(){
			this.$http({
				url:"/umsContent/queryById",
				method:"get",
				data:{
					id:9
				}
			}).then(data=>{ 
				this.loadResources(data.content)
			})
		},
		async loadResources(url) {
			try {
				// 替换成实际的图片地址
				const bgImageUrl = url
				const avatarUrl = this.userInfo.icon
				const qrCodeUrl = this.userInfo.shardQrCode
				
				
				const [bgImage, avatar, qrCode] = await Promise.all([
					this.getImageInfo(bgImageUrl),
					this.getImageInfo(avatarUrl),
					this.getImageInfo(qrCodeUrl)
				])
				
				this.posterBgImage = bgImage
				this.avatarImage = avatar
				this.qrCodeImage = qrCode
				
				this.drawPoster()
			} catch (error) {
				console.error('图片加载错误：', error)
				uni.showToast({
					title: '图片资源加载失败',
					icon: 'none'
				})
			}
		},
		
		getImageInfo(src) {
			return new Promise((resolve, reject) => {
				uni.getImageInfo({
					src: src,
					success: res => resolve(res),
					fail: err => reject(err)
				})
			})
		},
		
		async drawPoster() {
			const ctx = uni.createCanvasContext('posterCanvas', this)
			
			// 绘制背景图（填充整个canvas）
			ctx.drawImage(
				this.posterBgImage.path,
				0,
				0,
				this.canvasWidth,
				this.canvasHeight
			)
			
			// 绘制圆形头像
			const avatarSize = 40
			const avatarX = 40
			const avatarY = this.canvasHeight - 220 // 调整位置，距底部120px
			
			// 绘制头像白色圆形边框
			ctx.save()
			ctx.beginPath()
			ctx.arc(
				avatarX + avatarSize/2,
				avatarY + avatarSize/2,
				avatarSize/2 + 1, // 边框宽度4px
				0,
				2 * Math.PI
			)
			ctx.setFillStyle('#ffffff')
			ctx.fill()
			ctx.restore()
			
			// 绘制圆形头像
			ctx.save()
			ctx.beginPath()
			ctx.arc(
				avatarX + avatarSize/2,
				avatarY + avatarSize/2,
				avatarSize/2,
				0,
				2 * Math.PI
			)
			ctx.clip()
			ctx.drawImage(
				this.avatarImage.path,
				avatarX,
				avatarY,
				avatarSize,
				avatarSize
			)
			ctx.restore()
			
			// 绘制昵称（添加文字阴影使其在不同背景上都清晰可见）
			const nickname = this.userInfo.nickname
			ctx.setFontSize(16)
			// 绘制文字阴影
			ctx.setFillStyle('rgba(0, 0, 0, 0.3)')
			ctx.fillText(
				nickname,
				avatarX + avatarSize + 21,
				avatarY + avatarSize/2 + 9
			)
			// 绘制文字
			ctx.setFillStyle('#ffffff')
			ctx.fillText(
				nickname,
				avatarX + avatarSize + 20,
				avatarY + avatarSize/2 - 5
			)
			
			// 绘制昵称（添加文字阴影使其在不同背景上都清晰可见）
			//const nickname = this.nickname
			ctx.setFontSize(12)
			// 绘制文字
			ctx.setFillStyle('#ffffff')
			ctx.fillText(
				'邀请您加入',
				avatarX + avatarSize + 20,
				avatarY + avatarSize/2 + 20
			)
			
			// 绘制小程序码
			const qrSize = 100
			const qrX = this.canvasWidth - qrSize - 40
			const qrY = this.canvasHeight - 240 // 调整位置，距底部140px
			
			// 绘制小程序码白色背景
			ctx.save()
			ctx.beginPath()
			ctx.setFillStyle('#ffffff')
			ctx.fillRect(qrX - 2, qrY - 2, qrSize + 4, qrSize + 4)
			ctx.restore()
			
			// 绘制小程序码
			ctx.drawImage(
				this.qrCodeImage.path,
				qrX,
				qrY,
				qrSize,
				qrSize
			)
			
			// 绘制底部提示文字（添加文字阴影）
			const tipText = '长按识别或扫描二维码进入'
			ctx.setFontSize(14)
			// 计算文字宽度确保居中
			const textWidth = ctx.measureText(tipText).width
			const textX = (this.canvasWidth - textWidth) / 2
			const textY = this.canvasHeight - 80
			
			// 绘制文字阴影
			ctx.setFillStyle('rgba(0, 0, 0, 0.3)')
			ctx.fillText(
				tipText,
				textX + 1,
				textY + 1
			)
			// 绘制文字
			ctx.setFillStyle('#ffffff')
			ctx.fillText(
				tipText,
				textX,
				textY
			)
			
			// 执行绘制
			ctx.draw(false, () => {
				console.log('海报绘制完成')
				// 延迟一下再次绘制，确保所有元素都显示
				setTimeout(() => {
					ctx.draw(true)
				}, 100)
			})
		},
		
		saveImageToPhotosAlbum() {
			uni.canvasToTempFilePath({
				canvasId: 'posterCanvas',
				success: res => {
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: () => {
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							})
						},
						fail: (err) => {
							console.error('保存失败：', err)
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
						}
					})
				},
				fail: (err) => {
					console.error('生成图片失败：', err)
					uni.showToast({
						title: '图片生成失败',
						icon: 'none'
					})
				}
			})
		}
	}
}
</script>

<style lang="scss">
.container {
	position: relative;
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.arrow-left{
	position: fixed;
	left: 0rpx;
	top:0;
	display: flex;
	width: 100%;
	align-items: center;
	z-index: 999;
	.icon{
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}
.poster-canvas {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}
.download-box{
	
	position: fixed;
	bottom: 40rpx;
	width: 690rpx;
	height: 88rpx;
	z-index: 999;
	right: 0;
	margin: 0 auto;
	left: 0;
}
.download-btn { 
	width: 690rpx;
	height: 88rpx; 
	line-height: 88rpx;
	text-align: center;
	background-color: rgba(0,0,0,.5);
	color: #ffffff;
	border-radius: 44rpx;
	font-size: 32rpx;
}
</style>